<template>
    <div class="maincontent" style="padding:0;box-shadow:none;background:transparent">
        <div v-for="(item,index) in a" :key="item.pk" class="dynamic" >
            <div class="dynamiccontent" :class="[index % 2 == 0 ? '' :'right']">
                <router-link :to="{name:'publishArticlecontent',query:{id:item.pk}}">
                    <img class="contentimg" src="https://gitee.com/Cezzz/image2_repo/raw/master/img/20220114172154.jpg" >
                </router-link>
            </div>
            <div class="contenttop">
                <router-link class="contenta" :to="{name:'publishArticlecontent',query:{id:item.pk}}">{{item.fields.title}}</router-link>
                <div class="contenttime">
                    <span>
                        <i class="el-icon-date contenttimeico"></i>
                        <span class="contenttimeCreated">Created</span>
                        <time>{{item.fields.create_time}}</time>
                    </span>
                </div>
                <div class="contentbody"></div>
            </div>
        </div>
                
                <nav class="pagination">
                    <div class="paginationdiv">
                        <a v-for="page in pages" :key="page" class="paginationdiva" @click="nextpage(page)" href="#">{{page}}</a>
                        
                        <a class="paginationdiva" @click="nextpage(newpage+=1)" href="#"><i class="el-icon-truck"></i></a>
                    </div>
                </nav>
    </div>
</template>

<script>
import {requestGet} from '../api/requestPost'
export default {
    name:'Maincontent',
    data(){
        return{
            a:null,
            pages:null,
            totalpage:null,
            newpage:0,
        }
    },
    methods: {
        nextpage(page){
            
            if (this.totalpage>=9){
                requestGet({pagenumber:page}).then(res=>{
                // console.log(res.data.queryset)//数据
                this.a=res.data.queryset
                this.$bus.$emit('boketitle',this.a)
                
                for(var i in this.a){
                    console.log(this.a[i].fields.addtype)
                }
                // console.log('一共多少条',res.data.queryset.length)//页码 每十条一页
                this.totalpage=res.data.queryset.length
                this.pages=res.data.total_page_count+''
                
                })
            }else{
                this.$message({
                    message: '宝贝没有更多内容了哦~☹~',
                    type: 'warning'
                    });
            }
        }
    },
    created () {
        
        requestGet({pagenumber:'1'}).then(res=>{
            // console.log(res.data.queryset)//数据
            this.a=res.data.queryset
            this.$bus.$emit('boketitle',this.a)
            
            // for(var i in this.a){
            //     console.log(this.a[i].fields.addtype)
            // }
            // console.log('一共多少条',res.data.queryset.length)//页码 每十条一页
            this.totalpage=res.data.queryset.length
            this.pages=res.data.total_page_count+''
        })
    },
    mounted () {
        
    }
}
</script>

<style>
    .right{
        order: 1;
        -webkit-box-ordinal-group: 1;
        -webkit-order:1;
        -moz-box-ordinal-group: 1;
        -o-box-ordinal-group:1;
        -ms-flex-order: 1;
    }
</style>